<template>
  <el-card shadow="never" header="设备统计" class="dashboard-devices-panel">
    <div id="main" class="wh-full" />
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;

option = {
  title: {
    text: "设备统计",
    subtext: "实时数据",
    left: "right",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "设备统计饼图",
      type: "pie",
      radius: "60%",
      data: [
        { value: 1048, name: "智能门锁" },
        { value: 735, name: "智能摄像头" },
        { value: 580, name: "跌倒守护器" },
        { value: 484, name: "智能手表" },
        { value: 300, name: "智能开关" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

onMounted(() => {
  var chartDom = document.getElementById("main")!;
  var myChart = echarts.init(chartDom);

  option && myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
.dashboard-devices-panel {
  #main {
    height: 400px;
  }
}
</style>
